
<template>
  <div class="box">
    <div class="banner">
      <van-swipe :autoplay="3000" height="375">
        <van-swipe-item v-for="(image, index) in dataInfo.albums" :key="index"
          @click.stop="onPreviewPicture(dataInfo.albums)">
          <img style="object-fit: cover; width: 100%; height: 100%" :src="image" />
        </van-swipe-item>
      </van-swipe>
      <div class="banner-info">
        <span class="banner-info-left">
          <div>
            {{ dataInfo.avatar_status == 1 ? '真人照片｜' : ''
            }}{{ dataInfo.is_authentication == 1 ? '实名认证｜' : '' }}
          </div>
          <div>{{ dataInfo.is_merchant == 1 ? '微信审核' : '' }}</div>
        </span>
        <span class="banner-info-right">
          <div>喜欢ta</div>
          <div>{{ dataInfo.fans }}人</div>
        </span>
      </div>
    </div>
    <div class="list-info-message">
      <div class="list-info-message-line1">
        <div class="list-info-message-line1-name">{{ dataInfo.nickname }}</div>
        <div class="list-info-message-line1-age" v-if="dataInfo.sex == 2">
          <img src="@/assets/iconIndex/girl.png" />{{ dataInfo.age }}
        </div>
        <div class="list-info-message-line1-age" v-if="dataInfo.sex == 1" style="background: #cde1fd; color: #3662ec">
          <img src="@/assets/iconIndex/boy.png" />{{ dataInfo.age }}
        </div>

        <div class="list-info-message-line1-vip" v-if="dataInfo.is_svip == 1">
          <img src="@/assets/iconIndex/vip.png" alt="" />
        </div>
        <p class="list-info-message-line1-status">{{ dataInfo.distance }}</p>
      </div>
      <div class="list-info-message-line2">
        <div class="list-info-message-line2-describe">
          {{ dataInfo.describe }}
        </div>
        <div class="list-info-message-line2-distance">
          {{ dataInfo.distance }}
        </div>
      </div>
      <div class="list-info-message-line3">
        <div class="list-info-message-line3-always">常出没于：</div>
        <div class="list-info-message-line3-address">
          {{ dataInfo.haunt_place }}
        </div>
      </div>
      <div class="list-info-message-line4">
        <div class="list-info-message-line4-hobby">兴趣爱好：</div>
        <div class="list-info-message-line4-tags">
          <div v-for="itemInterest in dataInfo.labels.interest_label" :key="itemInterest">
            {{ itemInterest }}
          </div>
        </div>
      </div>
      <div class="list-info-message-line5" v-if="dataInfo.labels.service_label &&
        dataInfo.labels.service_label.length > 0
        ">
        <div class="list-info-message-line5-sport">服务项目：</div>
        <div class="list-info-message-line5-tags">
          <div v-for="itemService in dataInfo.labels.service_label" :key="itemService">
            {{ itemService }}
          </div>
        </div>
      </div>
      <div class="list-info-message-line3">
        <div class="list-info-message-line3-always">综合评分：</div>
        <div class="list-info-message-line3-address">
          {{ dataInfo.overall_score }}
        </div>
      </div>
      <div class="list-info-message-line3">
        <div class="list-info-message-line3-always">单项评分：</div>
        <div class="list-info-message-line3-address">
          {{ dataInfo.separate_score }}
        </div>
      </div>
    </div>
    <div class="tabs">
      <div :class="active == 0 ? 'tabs-active' : 'tabs-items'" @click="tabChange(0)">
        动态
      </div>
      <div :class="active == 1 ? 'tabs-active' : 'tabs-items'" @click="tabChange(1)">
        评论评分
      </div>
      <div v-if="!isMe" :class="active == 2 ? 'tabs-active' : 'tabs-items'" @click="tabChange(2)">
        联系方式
      </div>
    </div>

    <div class="plate">
      <span v-if="active == 0">
        <span v-if="dynamicList.length > 0">
          <div class="plate-dynamic" v-for="itemDyna in dynamicList" :key="itemDyna.id">
            <div class="plate-dynamic-name">{{ itemDyna.content }}</div>
            <div class="plate-dynamic-time">
              {{ formatDate(new Date(itemDyna.add_time)) }}｜{{
                itemDyna.city_name
              }}
            </div>
            <div class="plate-dynamic-picture" v-if="itemDyna.images.length > 1">
              <img mode="none" :src="itemImg" alt="" v-for="itemImg in itemDyna.images" :key="itemImg"
                @click.stop="onPreviewPicture(itemDyna.images)" />
            </div>
            <div class="plate-dynamic-picturess" v-else>
              <img mode="none" :src="itemImg" alt="" v-for="itemImg in itemDyna.images" :key="itemImg"
                @click.stop="onPreviewPicture(itemDyna.images)" />
            </div>
          </div>
        </span>

        <span v-else><van-empty description="暂无动态" /> </span>
      </span>
      <span v-if="active == 1">
        <div class="plate-review">
          <div v-if="dataInfo.reply_show_content == 1 && !isMe" class="discuss" @click="openReviewPop()">
            我要点评
          </div>
          <span v-if="replyList.length > 0">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="initReplyList">
              <div class="plate-review-box" v-for="itemReply in replyList" :key="itemReply.id">
                <div class="plate-review-box-headImg" @click="toUserDetail(itemReply.user)">
                  <img :src="itemReply.user.avatar" alt="" />
                </div>
                <div class="plate-review-box-info">
                  <div class="plate-review-box-info-name" @click="toUserDetail(itemReply.user)">
                    {{ itemReply.user.nickname }}
                  </div>
                  <div class="plate-review-box-info-start">
                    综合评分
                    <van-rate v-model="itemReply.overall_score" allow-half void-icon="star" void-color="#eee"
                      color="#ffd21e" size="12" readonly />
                    {{ itemReply.overall_score }}
                  </div>
                  <div class="plate-review-box-info-msg">
                    信息相符度{{ itemReply.info_score }}｜服务态度{{
                      itemReply.service_score
                    }}｜性价比{{ itemReply.effec_score }}|推荐度{{
  itemReply.recom_score
}}
                  </div>
                  <div class="plate-review-box-info-serve">
                    <div class="plate-review-box-info-serve-label">服务</div>
                    <div class="plate-review-box-info-serve-tags">
                      <p v-for="itemService in itemReply.service_label" :key="itemService">
                        {{ itemService }}
                      </p>
                    </div>
                  </div>
                  <div class="plate-review-box-info-review">
                    <div class="plate-review-box-info-review-label">评论</div>
                    <div class="plate-review-box-info-review-tags">
                      <p v-for="itemAaaess in itemReply.assess_label" :key="itemAaaess">
                        {{ itemAaaess }}
                      </p>
                    </div>
                  </div>
                  <div class="plate-review-box-info-note">
                    {{ itemReply.comment }}
                  </div>
                  <div class="plate-review-box-info-time">
                    {{ itemReply.add_time }}
                  </div>
                </div>
              </div>
            </van-list>
          </span>
          <span v-else>
            <van-empty description="暂无点评" />
          </span>
        </div>
      </span>
      <span v-if="active == 2">
        <div class="plate-contact">
          <span style="padding: 20px 10px; display: flex; width: 100%">
            <div class="plate-contact-wechat" @click="openOverlayPop('wx')">
              <img src="@/assets/detail/wechat.png" alt="" />
              <div>
                <p>微信号</p>
                <p>解锁ta的微信账号</p>
              </div>
            </div>
            <div class="plate-contact-line"></div>
            <div class="plate-contact-phone" @click="openOverlayPop('phone')">
              <img src="@/assets/detail/phone.png" alt="" />
              <div>
                <p>手机号</p>
                <p>解锁ta的手机号码</p>
              </div>
            </div>
          </span>
        </div>
      </span>
    </div>
    <div class="bottom" v-if="!isMe">
      <div class="bottom-focusBtn" v-if="!dataInfo.subscribe" v-debounce="onAttention">
        <img src="@/assets/detail/fllow.png" alt="" />
        <div>关注</div>
      </div>
      <div class="bottom-isfocusBtn" v-else v-debounce="onAttention">
        <div>已关注</div>
      </div>
      <div class="bottom-greetBtn" @click="chat">
        <img src="@/assets/detail/greeting.png" alt="" />
        <div>打招呼</div>
      </div>
    </div>
    <!-- 我要点评弹窗 -->
    <van-popup v-model="showViewPop" round position="bottom" @cancel="showViewPop = false" :style="{ height: '80%' }">
      <ReviewPopup v-if="showViewPop" :uid="dataInfo.uid" @closePop="showViewPop = false"></ReviewPopup>
    </van-popup>
    <!-- 遮罩层 -->
    <OverlayPop :showOverlayPop="showOverlayPop" :infoType="merchantInfo"></OverlayPop>
  </div>
</template>

<script>
import ReviewPopup from '@/components/reviewPopup.vue'
import OverlayPop from '@/components/overlayPop.vue'
import { location } from '@/utils/getLocation'
import { ReduceChat, chatOk } from '@/api/setting'
import {
  getReplyList,
  getMerChant,
  getEnterSecrecyPhone,
  getDynamicList,
  getUserInfo,
  userFollow,
} from '@/api/index'
import { parseTime } from '@/utils/fun'
import { Toast } from 'vant'
import { ImagePreview } from 'vant'
import { mapMutations } from 'vuex'

export default {
  name: 'HomeView',
  components: {
    ReviewPopup,
    OverlayPop,
  },
  data() {
    return {
      dynamicList: [],
      merchantInfo: {
        type: '',
        icon: '',
        title: '',
      },
      merchant_id: '',
      dataInfo: {
        albums: [],
        labels: {
          interest_label: [],
          service_label: [],
        },
      },
      replyParams: {
        limit: 10,
        merchant_id: '', //商家ID
        page: 1,
        type: 'merchant', //类型
      },
      replyList: [],
      isMe: false,
      active: 0,
      showOverlayPop: false,
      showViewPop: false,
      finished: false,
      loading: true,
      userParams: {
        lng: '',
        lat: '',
      },
      //我的发布&他人发布的动态，请求数据
      userParamsObj: {
        page: 1,
        limit: 10,
      },
    }
  },
  watch: {
    $route(to, form) {
      this.gitInit()
    },
  },
  mounted() {
    this.gitInit()
  },
  methods: {
    ...mapMutations('list', ['SET_INFOOBJ', 'SET_options', 'SET_messages']),

    //监听页面滚动条时候滚到底部
    chat() {
      let userinfo = this.$store.state.userInfo

      chatOk(this.dataInfo.uid).then((res) => {
        console.log(res)
        console.log(this.dataInfo)
        if (res.data.open_svip == 0 && res.data.open_chat > 0) {
          this.SET_messages({
            messages:[]
          })
          this.SET_INFOOBJ({
            key:this.dataInfo.uid,
            channel_id: '',
            unread_num: 0,
            lastMessage: '',
            userInfo: {
              [this.dataInfo.uid]: {
                avatarurl: this.dataInfo.avatar,
                nickname: this.dataInfo.nickname,
              },
            },
          })
          //初始化
          this.SET_options({
            // 对方的用户 ID 或者群组 ID 或聊天室 ID。
            targetId: this.dataInfo.uid.toString(),
            // 每页期望获取的消息条数。取值范围为 [1,50]，默认值为 20。
            pageSize: 20,
            // 查询的起始消息 ID。若该参数设置为 `-1`、`null` 或空字符串，从最新消息开始。
            cursor: -1,
            // 会话类型：（默认） `singleChat`：单聊；`groupChat`：群聊。
            chatType: 'singleChat',
            // 消息搜索方向：（默认）`up`：按服务器收到消息的时间的逆序获取；`down`：按服务器收到消息的时间的正序获取。
            searchDirection: 'up',
          })
          this.$router.push({
            path: '/chat/index',
            query: {
              toId: this.dataInfo.uid,
            },
          })
          // ReduceChat(userinfo).then((res1) => {
          //   console.log(res1)
          //   // 加载状态结束
          //   this.$router.push('/vip')
          // })
        } else if ((res.data.open_svip = 0)) {
          // 用户非vip进入会员中心
          this.$router.push('/vip')
        } else if (res.data.open_chat < 0) {
          Toast('当日聊天次数已用光,请前往"我的-会员中心"充值会员或明日再试')
        }
      })
    },
    // handleScroll(e) {
    //   console.log(e)
    //   const { scrollTop, clientHeight, scrollHeight } = e.target
    //   // console.log(scrollTop, clientHeight, scrollHeight)
    //   if (scrollTop + clientHeight === scrollHeight) {
    //     if (this.active == 0) {
    //       this.getDynamicList()
    //     } else if (this.active == 1) {
    //       this.initReplyList()
    //     } else if (this.active == 2) {
    //     }
    //   }
    // },
    async gitInit() {
      if (
        this.$route.query.id == this.$store.state.userInfo.uid ||
        !this.$route.query.id ||
        this.$store.state.userInfo.is_merchant == 1
      ) {
        this.isMe = true
      } else {
        this.isMe = false
      }
      if (!this.$store.getters['cityInfo']) {
        this.$store.dispatch('getCityInfo', '')
      } else {
        this.userParams.lng = this.$store.getters['cityInfo'].lng
        this.userParams.lat = this.$store.getters['cityInfo'].lat
      }
      if (this.$route.query.id) {
        this.userParams.id = this.$route.query.id
        this.replyParams.merchant_id = this.$route.query.id
      } else {
        this.userParams.id = this.$store.state.userInfo.uid
        this.replyParams.merchant_id = this.$store.state.userInfo.uid
      }
      if (this.active == 0) {
        this.getDynamicList()
      }
      if (this.active == 1) {
        this.initReplyList()
      }
      this.initUserInfo()
    },
    //请求接口，我的发布&他人发布的动
    getDynamicList() {
      getDynamicList(this.userParams.id, {
        ...this.userParamsObj,
      }).then((res) => {
        console.log(res)
        res.data.list.forEach((element) => {
          element.add_time = parseTime(element.add_time)
        })
        if (this.userParamsObj.page == 1) {
          this.dynamicList = res.data.list
          if (res.data.count == this.userParamsObj.limit) {
            this.userParamsObj.page++
          }
        } else {
          this.dynamicList = this.dynamicList.concat(...res.data.list)
          if (res.data.count == this.userParamsObj.limit) {
            this.userParamsObj.page++
          }
        }
      })
    },
    openOverlayPop(type) {
      let that = this
      getEnterSecrecyPhone(that.merchant_id)
        .then((res) => {
          console.log(res)
          if (res.data.open_svip == 1) {
            that.merchantInfo.type = 'vip'
            that.showOverlayPop = true
            return
          } else {
            if (res.data.open_see == -1) {
              Toast('查看次数已用完')
            } else if (res.data.open_see == 0) {
              Toast('暂无查看权限')
            } else {
              //初始化获取商家微信和手机号
              getMerChant(that.merchant_id).then((res) => {
                if (type === 'wx') {
                  that.merchantInfo.wechat = res.data.wechat
                  that.merchantInfo.icon = require('@/assets/detail/wechat.png')
                  that.merchantInfo.title = '微信号'
                } else {
                  that.merchantInfo.phone = res.data.phone
                  that.merchantInfo.icon = require('@/assets/detail/phone.png')
                  that.merchantInfo.title = '手机号'
                }
                that.merchantInfo.type = type
                that.showOverlayPop = true
              })
            }
          }
        })
        .catch((err) => { })
    },
    // 传递用户id 经纬度 获取主页信息
    initUserInfo() {
      console.log(this.userParams)
      getUserInfo(this.userParams)
        .then((res) => {
          if (res.status == 200) {
            console.log(res.data)
            res.data.describe =
              res.data?.height +
              'cm |' +
              res.data?.weight +
              'kg |' +
              res.data?.constellation +
              (res.data?.constellation ? '|' : '') +
              res.data?.occupation
            this.dataInfo = res.data
            this.merchant_id = this.dataInfo.uid
          }
        })
        .catch((err) => { })
    },
    //初始化评论列表
    initReplyList() {
      getReplyList(this.replyParams)
        .then((res) => {
          console.log(res, 'ghjk')
          res.data.list.forEach((element) => {
            element.add_time = parseTime(element.add_time)
            element.overall_score = parseFloat(element.overall_score)
          })

          // this.replyList = this.replyList.concat(...res.data.list)

          if (this.replyParams.page == 1) {
            this.replyList = res.data.list
            if (res.data.count == this.replyParams.limit) {
              this.replyParams.page++
            }
          } else {
            this.replyList = this.replyList.concat(...res.data.list)
            if (res.data.count == this.replyParams.limit) {
              this.replyParams.page++
            }
          }

          if (res.data.count <= this.replyList.length) {
            this.finished = true
          }
          this.$forceUpdate()
          this.loading = false
        })
        .catch((res) => {
          this.finished = true
          this.loading = false
        })

      this.finished = true
    },

    openReviewPop() {
      this.showViewPop = true
    },
    closeReviewPop() {
      console.log('关闭')
      this.showViewPop = false
    },
    tabChange(value) {
      console.log(value)
      this.active = value
      if (this.active == 0) {
        this.userParamsObj.page = 1
        this.getDynamicList()
      }
      if (this.active == 1) {
        this.replyParams.page = 1

        this.initReplyList()
      }
    },
    onPreviewPicture(albums) {
      ImagePreview({
        images: [...albums],
        closeable: true,
      })
    },
    //格式化日期
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
        }-${date.getDate() < 10 ? '0' + date.getDate() : date.getDate()}`
    },
    //取消关注/关注
    onAttention() {
      let type = this.dataInfo.subscribe
      userFollow({
        friend_uid: this.dataInfo.uid,
        type: type ? 0 : 1,
      }).then((res) => {
        if (type) {
          Toast('取消关注成功！')
        } else {
          Toast('关注成功！')
        }
        this.initUserInfo()
      })
    },
    //跳转评论用户的动态主页
    toUserDetail(item) {
      if (item.is_merchant == 1) {
        this.$router.push({
          path: '/detail',
          query: {
            id: item.uid,
          },
        })
      } else {
        this.$router.push({
          path: '/userDetail',
          query: {
            id: item.uid,
          },
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.line {
  height: 1px;
  background: #d8d8d8;
}

.box {
  overflow-y: auto;
  height: 100vh;
}

.banner {
  &-info {
    background: rgba(207, 254, 238, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: #00b578;
    padding: 8px 15px;

    &-left {
      display: flex;

      >div:nth-last-of-type(1) {
        font-size: 12px;
        font-weight: 500;
        color: #767676;
      }
    }

    &-right {
      display: flex;

      >div:nth-of-type(1) {
        margin-right: 5px;
      }
    }
  }
}

.list-info-message {
  padding: 15px;
  flex: 1;

  >div {
    display: flex;
  }

  &-line1 {
    align-items: center;
    position: relative;

    >div {
      margin-right: 8px;
    }

    &-name {
      font-size: 16px;
      font-weight: 500;
      color: #1a1a1a;
    }

    &-age {
      width: 38px;
      height: 16px;
      background: #fcdbdb;
      border-radius: 8px;
      color: #fa5151;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        margin-right: 2px;
      }
    }

    &-vip {
      display: flex;
      align-items: center;
    }

    &-status {
      position: absolute;
      right: 0;
      font-size: 12px;
      font-weight: 400;
      color: #ff8f1f;
    }
  }

  &-line2 {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #767676;
    line-height: 12px;
    padding: 8px 0;
    margin-bottom: 15px;

    &-describe {}

    &-distance {}
  }

  &-line3 {
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 400;
    color: #1a1a1a;

    &-always {
      width: 80px;
    }

    &-address {
      flex: 1;
    }
  }

  &-line4 {
    align-items: flex-start;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 400;
    color: #1a1a1a;

    &-hobby {
      display: flex;
      width: 80px;
    }

    &-tags {
      display: flex;
      flex-wrap: wrap;
      flex: 1;

      >div {
        margin-right: 8px;
        margin-bottom: 16px;
        padding: 4px 7px;
        background: #ffe5cc;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 400;
        color: #ff8f1f;
        text-align: center;
      }
    }
  }

  &-line5 {
    align-items: flex-start;
    margin-bottom: 16px;
    margin-right: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #1a1a1a;

    &-sport {
      width: 80px;
    }

    &-tags {
      display: flex;
      flex-wrap: wrap;
      flex: 1;

      >div {
        margin-right: 8px;
        margin-bottom: 16px;
        padding: 4px 7px;
        background: #e7d4ff;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 400;
        color: #8a38f5;
        text-align: center;
      }
    }
  }
}

.tabs {
  margin: 0 auto;
  width: 298px;
  height: 36px;

  background: #edf1fe;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid #edf1fe;

  >div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }

  &-active {
    height: 100%;
    font-weight: 500;
    color: #1a1a1a;
    background: #ffffff;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s;
  }

  &-items {
    font-weight: 500;
    color: #767676;
  }
}

.discuss {
  margin: 16px auto;
  width: 147px;
  height: 32px;
  background: #cde1fd;
  border-radius: 8px;
  border: 1px solid #3662ec;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3662ec;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
}

.plate {
  margin-bottom: 100px;

  &-dynamic {
    margin-top: 20px;
    padding: 0 16px;
    margin-bottom: 20px;

    &-name {
      font-size: 16px;
      font-weight: 400;
      color: #1a1a1a;
    }

    &-time {
      font-size: 12px;
      font-weight: 400;
      color: #767676;
      line-height: 25px;
    }

    &-picture {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;

      img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 4px;
      }
    }

    &-picturess {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      row-gap: 6px;

      img {
        width: 233px;
        height: 321px;
        border-radius: 4px;
        object-fit: cover;
      }
    }
  }

  &-review {
    margin-top: 20px;

    &-box {
      padding: 20px 15px;
      display: flex;

      &-headImg {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #ddd;
        margin-right: 7px;

        img {
          border-radius: 50%;
          width: 40px;
          height: 40px;
        }
      }

      &-info {
        &-name {
          font-size: 14px;
          font-weight: 500;
          color: #1a1a1a;
          line-height: 24x;
        }

        &-start {
          display: flex;
          align-items: center;
          font-size: 12px;
          font-weight: 500;
          line-height: 20px;
          color: #6b85f7;
        }

        &-msg {
          font-size: 12px;
          font-weight: 500;
          line-height: 20px;
          color: #6b85f7;
        }

        &-serve,
        &-review {
          display: flex;
          align-items: baseline;
          font-size: 12px;
          font-weight: 400;
          color: #767676;
          line-height: 12px;
          margin-bottom: 10px;

          &-label {
            flex: 1;
          }

          &-tags {
            flex: 9;
            display: flex;
            flex-wrap: wrap;

            p {
              margin-right: 8px;
              padding: 2px 7px;
              border-radius: 8px;
            }
          }
        }

        &-serve {
          &-tags {
            p {
              color: #8a38f5;
              background: #e7d4ff;
              margin-bottom: 5px;
            }
          }
        }

        &-review {
          &-tags {
            p {
              background: #ffd7ed;
              color: #eb2f96;
              margin-bottom: 5px;
            }
          }
        }

        &-note {
          font-size: 14px;
          font-weight: 400;
          color: #1a1a1a;
          line-height: 20px;
        }

        &-time {
          color: #aaaaaa;
          font-size: 10px;
          padding-top: 10px;
        }
      }
    }
  }

  &-contact {
    margin: 16px auto;
    width: 343px;
    height: 83px;
    background: linear-gradient(180deg, #3764ec90 0%, #6b85f790 100%);
    border-radius: 8px;
    border: 1px solid rgba(82, 117, 241, 0.6);
    display: flex;
    justify-content: space-evenly;

    color: #ffffff;

    &-wechat {
      flex: 1;
      display: flex;
      align-items: center;

      >div {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        p:nth-of-type(1) {
          font-size: 16px;
        }

        p:nth-of-type(2) {
          font-size: 12px;
        }
      }

      img {
        width: 32px;
        height: 32px;
        padding: 7px;
      }
    }

    &-line {
      width: 1px;
      height: 100%;
      margin: 0 18px;
      background: rgba(54, 98, 236, 0.5);
    }

    &-phone {
      flex: 1;
      display: flex;
      align-items: center;

      >div {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        p:nth-of-type(1) {
          font-size: 16px;
        }

        p:nth-of-type(2) {
          font-size: 12px;
        }
      }

      img {
        width: 32px;
        height: 32px;
        padding: 7px;
      }
    }
  }
}

.bottom {
  padding: 20px 0;
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  display: flex;
  justify-content: space-evenly;

  &-focusBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 50px;
    background: #fcdbdb;
    border-radius: 8px;
    color: #fa5151;
    font-size: 16px;

    >div {
      margin-left: 3px;
    }
  }

  &-isfocusBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 50px;
    background: #eeeeee;
    border-radius: 8px;
    color: #767676;
    font-size: 16px;

    >div {
      margin-left: 3px;
    }
  }

  &-greetBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 245px;
    height: 50px;
    background: linear-gradient(180deg, #3764ec 0%, #6b85f7 100%);
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;

    >div {
      margin-left: 3px;
    }
  }
}
</style>
